import React, { Component } from 'react';
import 'element-theme-default';
import './pagination.scss';
/**
 * Pagers需求
 * 1.点击高亮
 * 2.
 */

export default class Pagination extends Component {
	constructor(props){
		super(props);
		this.state = {
			nums: [1,2,3,4,5,6,7,8],
			internalCurrentPage: 1
		};
		console.log(props);
	}
	// 一个方法即是一个程序
	onPagerClick(i){
		console.log(i+1)
		this.setState({
			internalCurrentPage: i+1
		})
	}
	
	pre(){
		var nowIndex = this.state.internalCurrentPage;
		this.setState({
			internalCurrentPage: nowIndex > 1 ?  nowIndex-1 : 1
		})
	}
	
	next(){
		var nowIndex = this.state.internalCurrentPage;
		this.setState({
			internalCurrentPage: nowIndex < 8 ?  nowIndex+1 : 8
		})
	}
	
	render(){
		return (
			<div className="el-pagination">
				<button className="btn-prev" onClick={this.pre.bind(this)}>&lt;</button>
				<ul className="el-pager">
					{
						this.state.nums.map((item,index) => {
							const activeClass  = this.state.internalCurrentPage === index+1 ? 'num active' : 'num';
							return (
								<li 
								className={activeClass}
								key={index}
								onClick={this.onPagerClick.bind(this,index)}
								>
									{item}
								</li>
							);
						})
					}
				</ul>
				<button className="btn-prev"  onClick={this.next.bind(this)}>&gt;</button>
			</div>
		)
	}
}